<template>
	<view>
		<view class="tcard">
			<view class="card-title">电子就诊卡</view>
			<view class="center">
				<view class="card--title-bottom"></view>
			</view>
			<view class="mar-15 center">
				<barcode :value="detail.patId" :options="barcode_option" tag="svg"></barcode>
			</view>
			<view class="mar-15">
				<tkiQrcodeVue ref="qrcode" onval :val="detail.patId" :size="300" :load-make="true"
					:show-loading="false" />
			</view>
			<view class="center font-weight font-size-20">{{detail.name}}</view>
			<view class="mar-15">
				<view class="flex-start mar-5">
					<view>就诊卡号：</view>
					<view>{{detail.patId}}</view>
				</view>
				<view class="flex-start mar-5">
					<view>证件类型：</view>
					<view>{{detail.certTypeName}}</view>
				</view>
				<view class="flex-start mar-5">
					<view>证件号码：</view>
					<view>{{detail.idCard}}</view>
				</view>
				<view class="flex-start mar-5">
					<view>手机号码：</view>
					<view>{{detail.patPhone}}</view>
				</view>
				<view class="flex-start mar-5">
					<view>联系地址：</view>
					<view>{{detail.province+detail.city+detail.district}}</view>
				</view>
				<view class="flex-start mar-5">
					<view>详细地址：</view>
					<view>{{detail.patAddress}}</view>
				</view>
			</view>
			<view class="pad-16r" v-if="detail.guardian">
				<view class="border-col">监护人</view>
				<view class="flex-start mar-5">
					<view>姓名：</view>
					<view>{{detail.guardian}}</view>
				</view>
				<view class="flex-start mar-5">
					<view>地址：</view>
					<view>{{detail.patAddress}}</view>
				</view>
				<view class="flex-start mar-5">
					<view>手机：</view>
					<view>{{detail.patPhone}}</view>
				</view>
				<view class="flex-start mar-5">
					<view>身份证：</view>
					<view>{{detail.guardianCreNo}}</view>
				</view>
			</view>
		</view>
		<view class="around mar-15">
			<view class="btn-cancel btn" @click="openDialog">解除绑定</view>
			<view class="btn-edit btn" @click="handleEdit">修改资料</view>
		</view>
		<Dialog :show.sync="show" title="温馨提示" @close="show=false" @confirm="confirm" @update:show="handleCancel">
			<slot>
				<view class="center">
					确认解绑该电子就诊卡吗？
				</view>
			</slot>
		</Dialog>
	</view>
</template>

<script>
	import tkiQrcodeVue from '../../components/QrCode/tki-qrcode.vue'
	import Dialog from "@/components/Dialog/Dialog.vue"
	import {
		patientCardCancel
	} from '../../api/login'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
			tkiQrcodeVue,
			Dialog
		},
		data() {
			return {
				barcode_option: {
					displayValue: false, //是否默认显示条形码数据
					//textPosition  :'top', //条形码数据显示的位置
					background: '#fff', //条形码背景颜色
					valid: function(valid) {
						// console.log(valid)
					},
					width: '3px', //单个条形码的宽度
					height: '55px',
					fontSize: '22px' //字体大小
				},
				detail: {}, //详细信息
				show: false,
			}
		},
		computed: {
			...mapGetters(['userId', 'userInfo', 'userList']),
		},
		mounted() {
			this.detail = uni.getStorageSync("patientCardDetail");
			let idCard = this.detail.certId
			let phone = this.detail.patPhone
			this.detail.idCard = idCard.substring(0, 3) + '**********' + idCard.substring(15)
			this.detail.patPhone = phone.substring(0, 3) + '****' + phone.substring(7)
			let guardianCreNo = this.detail.guardianCreNo
			if (guardianCreNo) {
				this.detail.guardianCreNo = guardianCreNo.substring(0, 3) + '**********' + guardianCreNo.substring(15)
			}

		},
		methods: {
			...mapActions(['userLogout']),
			openDialog() {
				if (this.detail.loginStatus == 1) {
					this.$u.toast('默认就诊卡无法解除绑定')
					return
				}
				this.show = true;
			},
			confirm() {
				this.show = false;
				this.userLogout(this.detail).then(res => {
					uni.navigateBack(1)
				})
			},
			handleCancel(show) {
				this.show = show;
			},
			handleEdit() {
				uni.navigateTo({
					url: '/pages/Login/updatePatientCard'
				})
			}
		}
	}
</script>

<style scoped>
	.tcard {
		margin: 20px;
	}

	.card-title {
		text-align: center;
		font-size: 20px;
	}

	.card--title-bottom {
		border-top: 5px solid blue;
		width: 30px;
		border-radius: 10px;
	}

	.btn {
		padding: 10px 40px;
		border-radius: 30px;
	}

	.btn-cancel {
		border: 1px solid red;
		color: red;
	}

	.btn-edit {
		background: linear-gradient(139deg, #76E1E7 0%, #40CFE6 100%);
		border-radius: 166px 166px 166px 166px;
		font-size: 15px;
		color: #FFFFFF;
	}
</style>